<!--添加接种记录-->
<template>
    <div class="inoculate-record">
        <Modal
                class="inoculate-record-modal"
                width="1100px"
                v-model="myVisible"
                title="添加接种记录"
        >
            <Form ref="formInline" :model="formInline" :rules="ruleInline"  :label-width="100" inline>
                <div>
                    <FormItem label="疫苗名称">
                        <Input v-model="vaccineName" placeholder="输入疫苗名称" disabled>
                        <Button slot="append" icon="ios-search" @click="searchVaccine"></Button>
                        </Input>
                    </FormItem>
                    <FormItem label="疫苗厂家">
                        <Input v-model="formInline.vaccinecompany" placeholder=""></Input>
                    </FormItem>
                </div>
                <div>
                    <FormItem label="剂次">
                        <Input v-model="doseValue" placeholder="" disabled ></Input>
                    </FormItem>
                    <FormItem label="疫苗效期">
                        <DatePicker type="date" placeholder="请选择" v-model="formInline.vilidate"></DatePicker>
                    </FormItem>
                </div>
                <div>
                    <FormItem label="疫苗批号">
                        <Input v-model="formInline.batchno" placeholder=""></Input>
                    </FormItem>
                    <FormItem label="接种日期">
                        <!--<Input v-model="formInline.value1" placeholder=""></Input>-->
                        <DatePicker type="date" placeholder="请选择" v-model="formInline.inotime"></DatePicker>
                    </FormItem>
                </div>
                <div>
                    <FormItem label="接种部位">
                        <Input v-model="formInline.position" placeholder=""></Input>
                    </FormItem>
                    <FormItem label="接种医生">
                        <Input v-model="formInline.doctor" placeholder=""></Input>
                    </FormItem>
                </div>
                <div>
                    <FormItem label="接种医院">
                        <Input v-model="formInline.inocompany" placeholder=""></Input>
                    </FormItem>
                </div>
            </Form>
            <div slot="footer">
                <Button type="primary" class="left-btn" @click="save">保存</Button>
                <Button class="right-btn"  @click="myVisible=false">取消</Button>
            </div>
        </Modal>


        <Modal
                v-model="modalValue"
                width="1100px"
                title="选择"
                 >
             <Table :columns="columns2" :data="data2" class="select-two-table"></Table>
        </Modal>

    </div>
</template>

<script>
    import {noino,saveino} from '@/api/inoculate/inoculate';

    export default {
        props: {
            visible: Boolean,
            babytype: Number
        },
        data(){
            return {
                myVisible: this.modalVisible,
                myVisible1: false,
                modalValue: false,

                ruleInline:{

                },

                vaccineName: '',
                doseValue:'',

                formInline: {
                    peopleid: null,  // 儿童id
                    babyType: 0,  // 儿童类型
                    planid: null,
                    vaccinecompany: '',
                    vilidate: '',
                    batchno: '',
                    inotime: '',
                    position: '',
                    doctor: '',
                    inocompany: '',
                },
                columns2:[
                    {
                        title: '疫苗名称',
                        key: 'vaccinename'
                    },
                    {
                        title: '剂次',
                        key: 'dose'
                    },
                    {
                        title: '总剂次',
                        key: 'totaldose'
                    },
                    {
                        title: '年龄',
                        key: 'age'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.modalValue= false;
                                            this.formInline.planid=params.row.id;
                                            this.vaccineName=params.row.vaccinename;
                                            this.doseValue= params.row.dose;
                                        }
                                    }
                                }, '选择'),
                            ])
                        }
                    }
                ],
                data2:[]
            }
        },
        computed:{
            peopleid () {
                return this.$route.query.peopleid;
            }
        },
        watch: {
            myVisible: function (newVal,oldVal) {
                this.$emit('update:visible', newVal);
            },
            visible: function (val) {
                this.myVisible = val;
            }
        },
        mounted(){

        },
        methods:{
            searchVaccine(){
                this.modalValue=true;
                noino({
                    peopleid: this.peopleid,
                    babytype: this.babytype
                }).then((res)=>{
                    if(res.data.error==0){
                        this.data2=res.data.plans;
                    }
                })
            },
            save(){
                let form=Object.assign(this.formInline);
                form.peopleid=this.peopleid;
                form.vilidate=this.$moment(this.formInline.vilidate).format('YYYYMMDD');
                form.inotime=this.$moment(this.formInline.inotime).format('YYYYMMDD');

                saveino(form).then((res) => {
                    if(res.data.error==0){
                       this.myVisible=false;
                        this.$emit('saveIno',true)
                    }
                })
            }
        }
    }
</script>

<style lang="less">
    .inoculate-record-modal{
        .ivu-form-item{
            width:390px;
        }
    }
    .select-two-table{
        max-height: 400px;
        overflow-y: scroll;
        overflow-x: hidden;
        .ivu-table-overflowX{
            overflow-x: hidden!important;
        }
    }
</style>
